<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//#id 
			function getElById(){
				var blo1 = document.getElementById("blo1");
				console.log("blo1",blo1)
			}
			
			function getElByTagName(){
				var div = document.getElementsByTagName("div");  // HTMLCollection
				console.log("div",div)
			}
			
			
			function getElByClassName(){
				var bc = document.getElementsByClassName("bc");  // HTMLCollection
				console.log("bc",bc)
				
				var bc2 = document.getElementsByClassName("bc2");  // HTMLCollection
				console.log("bc2",bc2);
				let bc2Item = bc2[0];
				bc2Item.innerHTML ="修改后的内容"
			}
		
		</script>
	</head>
	<body>
		<button type="button" onclick="getElById()">根据ID获取元素</button>
		<button type="button" onclick="getElByTagName()">根据元素标签获取元素</button>
		<button type="button" onclick="getElByClassName()">根据classss获取元素</button>
		
		
		<div id="blo1" class="bc"> block 1</div>
		<div id="blo1" class="bc"> block 2</div>
		<div 		   class="bc2"> block 3</div>
		
		<div> block 4</div>
		<div> block 5</div>
		<div> block 6</div>
		
	</body>
</html>
